<template>
  <div class="uni-lora-map">
    <el-dialog
      :fullscreen="true"
      :close-on-click-modal="false"
      :visible.sync="visible">
        <span slot="title" class="uni-title">
          当前位置(<span class="uni-name">{{user.name}}</span>)
          <span class="uni-map-floor">当前楼层：{{activeFloor.buildingName}}<span class="uni-floor">{{activeFloor.name}}</span></span>
          <!-- <span class="uni-map-floor">{{type}}楼层：{{buildingName}}<span class="uni-floor">{{floorName}}</span></span> -->
          <span class="uni-floor" v-if="hasPermission('smis:system')" @click="showUwb">显示UWB</span>
        </span>
        <LoraMap ref="currentMap"/>
        <UserPopover ref="userPopover" @onHistory="showHistory"/>
        <!-- <Compass ref="compass" class="uni-compass"/> -->
        <LoraButtons class="uni-buttons" @onToggleMode="toggleMode"/>
    </el-dialog>
  </div>
</template>

<script>
  import LoraMap from '@/components/jfMap/loraMap.vue'
  import UserPopover from '../home/UserPopover'
  // import Compass from '../../../../components/jfMap/compass.vue'
  import LoraButtons from '../home/LoraButtons.vue'
  import * as XcUtil from '../../../../utils/xcutil.js'
  let currTimer = null
  export default {
    props: {
      type: {
        type: String,
        default: "当前"
      },
    },
    data () {
      return {
        visible: false,
        user: {},
        activeFloorId: ""
      }
    },
    components: {
      LoraMap,
      UserPopover,
      LoraButtons
    },
    beforeDestroy() {
      if(currTimer) {
        clearTimeout(currTimer)
        currTimer = null
      }
    },
    watch: {
      visible(val) {
        if(!val) {
          if(currTimer) {
            clearTimeout(currTimer)
            currTimer = null
          }
          this.activeFloorId = ""
        }
      }
    },
    methods: {
      init (row) {
        this.user = row
        this.visible = true
        if(currTimer) {
          clearTimeout(currTimer)
          currTimer = null
        }
        this.activeFloorId = ""

        this.$nextTick(()=>{
          this.$refs.userPopover.setUser(row)
          this.$refs.currentMap.reset();
          this.$refs.currentMap.resize();
          this.query()
        })
      },
      showHistory(){
        this.$emit('onHistory', this.user)
      },
      query(){
        if(!this.visible) {
          return
        }
        // 获取新的位置信息
        // this.$http({
        //   url: `/smis/member/jfMember/queryById?id=${this.user.id}`,
        //   method: 'get',
        //   loading: false,
        //   message: false
        // }).then(({data}) => {
        //   if(data && data.success && data.jfMember && this.$refs.currentMap) {
        //     this.showUser(data.jfMember)
        //   }
        //   currTimer = setTimeout(()=>{
        //     this.query()
        //   }, 3000)
        // })

        // 获取新的位置信息
        this.$http({
          url: `/lora/user/jfLoraUser/queryById?id=${this.user.id}`,
          method: 'get',
          loading: false,
          message: false
        }).then(({data}) => {
          if(data && data.success && data.jfLoraUser && this.$refs.currentMap) {
            // console.log(data.jfLoraUser.x+","+data.jfLoraUser.y)
            this.showUser(data.jfLoraUser)
          }
          this.timer = setTimeout(()=>{
            this.query()
          }, 5000)
        })
      },
      showUwb() {
        this.$refs.currentMap.showUwb();
      },
      showUser(point) {
        if (!point) {
          return
        }
        if (!this.$refs.currentMap) {
          return
        }

        if(this.activeFloorId !== point.floorId) {
          this.$refs.currentMap.showFloors([point.floorId], []);
          this.activeFloorId = point.floorId
        }
        this.$refs.currentMap.showUser(this.user.id, this.user.name, point)
        if( !this.$refs.currentMap.hasUser(this.user.id) ) {
          this.$refs.currentMap.getMapManager().coordById(this.user.id, (visible, coord)=>{
            if(visible) {
              this.$refs.userPopover.setPosition(coord.x, coord.y)
            } else {
              this.$refs.userPopover.setPosition(-200, -100)
            }
          });
        }
      },
      toggleMode(mode, callback) {
        if(this.$refs.currentMap) {
          this.$refs.currentMap.setViewMode(mode, callback)
        }
      }
    },
    computed: {
      activeFloor() {
        for(var i=0; i<this.floorList.length; i++) {
          if(this.floorList[i].id == this.activeFloorId) {
            return this.floorList[i]
          }
        }
        return {
          name: '',
          buildingName: ''
        }
      },
      floorList() {
        return this.$store.state.shopdata.floorList
      },
      backParam() {
        return this.$store.state.config.backParam
      }
    }
  }
</script>
<style>
  .uni-lora-map .el-dialog__body {
    height: 100%;
    position: relative;
    padding: 0;
    overflow: hidden;
  }
</style>
<style lang="less" scoped="scoped">
  .uni-compass {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 10;
  }
  .uni-buttons {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 10;
  }
  .uni-title {
    font-size: 14px;
  }
  .uni-name {
    font-weight: bold;
    margin: 0px 5px;
    color: #3f8ef7;
  }
  .uni-popover-notice {
    font-size: 12px;
    span {
      color: #F5222D;
    }
  }
  .uni-map-floor {
    margin-left: 30px;
    color: #657180;
    font-size: 14px;
    .uni-floor {
      background-color: #3f8ef7;
      color: #FFFFFF;
      padding: 7px 10px;
      border-radius: 5px;
      font-size: 12px;
      margin-left: 10px;
    }
  }
</style>
